<template>
	<div class="mg-tb">
		<div class="row" v-for="(item,index) in datalist" :key="index">
			<mt-switch class="switch" v-model="value[index]"></mt-switch>
			<img :src="item.thumb_path" width="75px" height="75px">
			<div class="message">
				<h4>{{item.title}}</h4>
				<ul class="mes">
					<li>￥{{item.sell_price}}</li>
					<li>
						<carinputNumber class="counts" :initCount="item.cou" :goodsid="item.id" v-on:cardataObj="getInputnumber"></carinputNumber>
					</li>
					<li>
						<a href="javascript:;" @click="removedata(item.id,index)">删除</a>
					</li>
				</ul>
			</div>
		</div>
		<div id="total">
			<div class="desc">
				<ul>
					<li>总计（不含运费）</li>
					<li>已勾选商品{{totalcount}}件，总价￥{{totalArrcount}}元</li>
				</ul>
			</div>
			<div class="close">
				<mt-button type="danger" size="small">去结束</mt-button>
			</div>
		</div>
		{{value}}
	</div>
</template>

<script>
import { getgoodsObject, updata,removeItem } from '../../kits/localStorage.js';
import { Toast } from 'mint-ui';
import apiphoto from "../../kits/Common.js";
import carinputNumber from '../subcom/carinputNumber.vue';
export default {
	components: { carinputNumber },
	computed:{
		// 定义计算总件数的属性
		totalcount(){
			var trueArr = this.value.filter(function(item){return item});
			
			// 遍历this.value 判断当前的值如果为true 则这个商品的总价格是要计算的
			//当前商品数量×商品的价格 （这两个值都在this.datalist中来）
			var amout = 0;
			this.value.forEach((item,index)=>{
				if(item){
					var count = this.datalist[index].cou;
					var price = this.datalist[index].sell_price;
					var itemcount = count * price;
					amout += itemcount;					
				}
			})
			this.totalArrcount = amout;
			//返回为true的数组数量
			return trueArr.length;
		}
	},
	data() {
		return {
			totalArrcount:0,	//总价格
			value: [],
			datalist: [
				// {
				// 	"cou": 1,
				// 	"id": 87,
				// 	"title": "华为（HUAWEI）荣耀6Plus 16G双4G版",
				// 	"sell_price": 2195,
				// 	"thumb_path": "http://182.254.146.100:8080/upload/201504/20/thumb_201504200046589514.jpg"
				// },
				// {
				// 	"cou": 1,
				// 	"id": 88,
				// 	"title": "苹果Apple iPhone 6 Plus 16G 4G手机（联通三网版）",
				// 	"sell_price": 5780,
				// 	"thumb_path": "http://182.254.146.100:8080/upload/201504/20/thumb_201504200059017695.jpg"
				// }
				// http://182.254.146.100:8899/api/goods/getshopcarlist/87
			]
		}
	},
	created() {
		this.geidataList();
	},
	methods: {
		removedata(itemid,index){
			// 删除this.value
			this.value.splice(index,1);
			// 删除this.datalist
			this.datalist.splice(index,1);
			//删除local
			removeItem(itemid);
		},
		getInputnumber(resobj) {
			// 获取 数量组件中返回的内容
			// 更新local中数据
			updata(resobj);
			// 更新this.datalist中的当前数量
			for (var i = 0; i <  this.datalist.length; i++) {
				if(this.datalist[i].id == resobj.goodsid){
						if(resobj.type == 'add'){
							this.datalist[i].cou = this.datalist[i].cou +1;
						}else{
							this.datalist[i].cou = this.datalist[i].cou - 1;							
						}
				console.log( "this.datalist[i].cou:"+this.datalist[i].cou);						
						break;						
				}
			}
		},
		geidataList() {
			var obj = getgoodsObject();
			var objid = '';
			for (var k in obj) {
				objid += k + ',';
			}
			objid = objid.substring(0, objid.length - 1);
			var url = apiphoto.apiphoto + "/api/goods/getshopcarlist/" + objid;
			this.$http.get(url).then(function (res) {
				var body = res.body;
				if (body.status != 0) {
					Toast(body.message);
					return;
				}

				// 将localStorage中所有商品对应的count 值赋值给message中的cou
				body.message.forEach( (item) =>{	//箭头函数没有this 里面的this会一直往外面找最终是vm
					item.cou = obj[item.id];

					//为了解决一个BUG所以必须在此处初始化value数组全部为false
					this.value.push(false);
				})
				this.datalist = body.message;

				
			})
		}
	}
}
</script>

<style scoped>
.row {
	border-bottom: 1px solid #099;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.row img {
	margin-right: 5px;
}

.mes {
	padding: 0;
	margin: 0;
}

.mes li {
	list-style: none;
	display: inline-block;
}

.mes li:nth-child(1) {
	color: red;
}

.message {
	justify-content: center;
	flex: 1;
}

.message h4 {
	font-size: 16px;
	color: #099;
	align-items: center;
	justify-content: flex-end;
}

.switch {
	width: 75px;
	height: 75px;
	flex: 0 0 75px;
	justify-content: center;
	align-items: center;
}
#total{
	width: 100%;
	height: 100px;
	background-color: #ddd;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 15px;
}
#total ul{
	padding-left: 0;
}
#total ul li{
	list-style: none;
}
</style>